<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Football Test1</title>
<link href="/PFJSP/css/Bfootballtest1.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">
$( init );

function init() {
  for ( var i=0; i<10; i++ ) {
	var pos = Math.floor(Math.random()*5);
    $('<div class="player">' +pos + '</div>').data('row',pos).attr( 'id', pos+'p' ).appendTo( '#squadteam' ).draggable( {
      containment: '#content',
      cursor: 'move',
      revert: function ( event, ui ) {
          $(this).data("draggable").originalPosition = {
              top: $(this).data("draggable").originalPosition.top,
              left: $(this).data("draggable").originalPosition.left
          };
          return !event;
      },
      start: function() {
    	  $('tr[id*=' + $(this).data('row') + ']').children().addClass('highlight');
    	  var ultimo = $('#'+$(this).data('last'));
    	  if(ultimo != null){
    		  ultimo.removeClass('posfilled');
    		  ultimo.addClass('highlightGrenn');
    	  }
      },
      stop: function() {
          $('.highlight').removeClass('highlight');
          var ultimo = $('#'+$(this).data('last'));
          if(ultimo != null){
          ultimo.removeClass('highlightGrenn');
		  ultimo.addClass('posfilled');
          }
      }
    } );
  }
 
  // Create droppabled
  for ( var i=0; i<10; i++ ) {
	  for( var j=0; j<5; j++){
		  $('<td class="droppable">'+(i*5+j)+'c</td>').data('row', i).attr('id', i*5+j+'c').appendTo( $('#'+i) ).droppable( {
		      drop: handleCardDrop
		    } );
	  }
  }
  function handleCardDrop( event, ui ) {
	  var fieldNumber = $(this).data( 'row' );
	  var pNumber = ui.draggable.data( 'row' );
 
	  if ( fieldNumber == pNumber ) {
		$( this ).removeClass('droppable').addClass( 'posfilled' );
		var ultimo = $('#'+ui.draggable.data('last'));
		ultimo.removeClass('posfilled').removeClass('highlightGrenn').addClass('droppable');
		ui.draggable.data('last', $(this).attr('id'));
	    ui.draggable.position( { of: $(this), my: 'center', at: 'center' } );
	  }else{
	  	ui.draggable.animate(ui.draggable.data("draggable").originalPosition,"slow");  
	  }
	}    
}
</script>

</head>



<body>

	<div id="squadbox">
		<p:panel id="squadheader">Squad</p:panel>
		<div id="squadteam"></div>
	</div>

	<div id="fieldbox">
		<table id="fieldtable">
			<tr id="0">

			</tr>
			<tr id="1">

			</tr>
			<tr id="2">

			</tr>
			<tr id="3">

			</tr>
			<tr id="4">

			</tr>
			<tr id="5">

			</tr>
			<tr id="6">

			</tr>
			<tr id="7">

			</tr>
			<tr id="8">

			</tr>
			<tr id="9">

			</tr>
		</table>
	</div>
</body>
</html>